<template>
  <q-card :class="id" class="dialog-card" style="max-width: unset;">
    <q-card-section class="header" @mousedown="move($event)">
      <slot name="header">
        <div v-if="title" class="text-subtitle2">{{title}}</div>
        <div v-else style="color: red;">请设置标题</div>
      </slot>
    </q-card-section>
    <q-separator class="separator"/>
    <q-card-section class="body">
      <q-scroll-area style="height: 100%; width: 100%;">
        <slot name="default"></slot>
      </q-scroll-area>
    </q-card-section>
    <q-separator class="separator" v-if="!readonly"/>
    <q-card-section class="footer" v-if="!readonly && !hideBottom" style="padding: 0;">
      <slot name="footer"></slot>
    </q-card-section>
  </q-card>
</template>

<script setup>
import { moveRelate, movePanel } from 'dlsjs';
import {onBeforeMount, onMounted, ref, useAttrs} from "vue";
const id = ref('')
const attrs = useAttrs()
const emits = defineEmits(['event'])
const props = defineProps({
  title: String,
  hideBottom: Boolean,
  readonly: Boolean
})
function move(e) {
  if(attrs.style?.position === 'absolute') {
    movePanel(e, `.${id.value}`)
  }else {
    moveRelate(e, `.${id.value}`)
  }
}
onBeforeMount(() => {
  id.value = 'dialog' + new Date().getTime()
})
</script>

<style scoped lang="scss">
.dialog-card {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: center;
  height: 80vh;
  width: 600px;
  min-width: unset;
}
.header {
  width: 100%;
  height: 40px;
  padding: 10px 0 0 10px;
  cursor: move;
}
.body {
  width: 100%;
  flex-grow: 1;
}
.footer {
  width: 100%;
  height: 50px;
  padding: 10px 10px 10px 0;
}
.separator {
  width: 100%;
}
.footer-btn {
  padding: 0 10px;
}
</style>
